<template>
	<view>
		<uni-popup ref="backReason" :maskClick="false">
			<view class="back_reason-wrap">
				<view class="tit-wrap">
					<text class="tit">退款原因</text>
					<image class="img-bg" src="../../pagesUser/static/back_reason-bg.png" mode="aspectFill"></image>
				</view>
				<view class="reason">{{reason}}</view>
				<uni-icons @click="hide" class="close-icon" type="close" size="30" color="#fff"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			reason: {
				type: String
			}
		},
		methods: {
			show() {
				this.$refs.backReason.open()
			},
			hide() {
				this.$refs.backReason.close()
			},
			handleConfirm() {
				this.$emit('confirm')
				this.hide()
			}
		}
	}
</script>

<style lang="scss" scoped>
.back_reason-wrap {
	width: 500rpx;
	min-height: 480rpx;
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	.tit-wrap {
		height: 240rpx;
		position: relative;
		color: #fff;
		.img-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
		}
		.tit {
			font-size: 42rpx;
			position: absolute;
			top: 60%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 2;
		}
	}
	.reason {
		font-size: 28rpx;
		line-height: 46rpx;
		padding: 34rpx 69rpx 70rpx;
	}
	.close-icon {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		z-index: 3;
	}
}
</style>
